<div fxFLex="100%" class="fullscreen order layout layout-column">
    <md-sidenav-container>
        <div fxLayout="column" class="order-container">
            <header class="app-header noshrink">
                <span id="order-back-btn" class="i-arrow-back margin-l header-icon" (click)="goBack()"></span>
                <span fxFlex="100%" class="margin-l-xs">点单</span>
                <span class="margin-r" [ngClass]="{'i-list':searchModel,'i-search':!searchModel}" (click)="toggleSearchModel()"></span>
            </header>
            <div fxLayout="row" fxLayoutAlign="start center" class="invt-search-area noshrink" *ngIf="searchModel">
                <span class="i-search noshrink margin-l-s"></span>
                <input class="margin-l-s text-s" fxFlex="100%" type="text" #searchInput placeholder="输入拼音首字母或产品编码检索" [(ngModel)]="key" (input)="searchInventory($event.currentTarget.value)">
                <span class="i-keyboard noshrink search-keyboard margin-l-s margin-r-s" [ngClass]="{'color-primary': !showKeyboard}" (click)="toggleKeyboard()"></span>
            </div>
            <div fxLayout="row" fxLayoutAlign="center center" fxFlex="100%" *ngIf="searchModel && (!searchInventories || !searchInventories.length)">
                <span>没有商品数据</span>
            </div>
            <div class="v-scroll" fxFlex="100%" *ngIf="searchModel && searchInventories && searchInventories.length" infinite-scroll
                [scrollWindow]="false" [infiniteScrollDistance]="2" (scrolled)="loadMoreInvtFromCache()">
                <div fxLayout="column" #searchInvtList>
                    <div class="search-item-list margin-l-s" fxLayout="row" fxLayoutAlign="start center" *ngFor="let item of searchInventories">
                        <div fxLayout="row" fxFlex="100%" (click)="InventoryListAddToCart(item, $event)">
                            <img class="search-item-pic" src="{{item.pic ? item.pic : './assets/images/invt-default-pic.png'}}" alt="">
                            <div fxLayout="column" fxFlex="100%" class="margin-l-s">
                                <span>{{item.name}}</span>
                                <span class="search-item-price v-gap-s color-primary">
                                    {{(item.price?item.price:0)|number:'1.2-2'|currencySymbol}}<!--/{{item.unit ? item.unit.name : ""}}-->
                                </span>
                            </div>
                        </div>
                        <div class="invt-soldout" *ngIf="checkIsSoldOut(item.id)" (click)="false">
                            <div fxLayout="row" fxLayoutAlign="center center" class="invt-soldout-tip">
                                <span>售罄</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layout-row order-content flex" *ngIf="!searchModel">
                <div class="order-classify-list v-scroll noshrink">
                    <div fxLayout="column" fxLayoutAlign="center center" class="category-container" *ngFor="let item of categoryList" (click)="onCategoryClick(item)"
                        [ngClass]="{'type-selected': item.checked}">
                        <div fxFlex="100%" fxLayout="row" fxLayoutAlign="center center" class="pct100">
                            <div fxLayout="row" fxLayoutAlign="center center" class="inventory-type pct100">
                                <span class="category-name">{{item.name}}</span>
                            </div>
                        </div>
                        <div class="category-bottom"></div>
                        <div *ngIf="getInvtCate(item)" class="corner-mark color-white bgcolor-primary">
                            <span>{{getInvtCate(item)}}</span>
                        </div>
                    </div>
                </div>
                <div fxLayout="column" class="flex">
                    <div fxLayout="column" fxFlex="100%">
                        <div fxLayout="row" fxLayoutAlign="start center" class="order-item text-s noshrink">{{checkedCatetory.name}}</div>
                        <div class="invt-list v-scroll" fxFlex="100%" *ngIf="inventoryList && inventoryList.length" infinite-scroll [scrollWindow]="false"
                            [infiniteScrollDisabled]="disabledScroll" [infiniteScrollDistance]="2" (scrolled)="onScroll()">
                            <div class="invt-list-container noshrink" #invtList fxLayout="column">
                                <div fxLayout="row" class="invt-item" *ngFor="let item of inventoryList" (click)="onInventoryClick(item)">
                                    <div class="invt-item-info" fxFlex="100%" fxLayout="column">
                                        <div fxLayout="row" fxFlex="100%" class="over-hidden">
                                            <span>{{item.name}}</span>
                                            <span fxFlexAlign="end" class="text-xs margin-l-xs" *ngIf="item.unit && item.unit.unitType=='weight'">{{getInvtInCartNum(item)}}</span>
                                        </div>
                                        <div fxLayout="row" class="inventory-price-num noshrink color-primary text-s">
                                            <div>{{(item.price?item.price:0)|number:'1.2-2'|currencySymbol}}</div>
                                            <div *ngIf="item.unit">/{{item.unit.name}}</div>
                                        </div>
                                    </div>
                                    <div fxLayout="row" fxLayoutAlign="start center" class="invt-item-info noshrink">
                                        <div fxLayout="row" fxLayoutAlign="center center" class="invt-order" *ngIf="!checkIsSoldOut(item.id)">
                                            <div fxLayout="row" fxLayoutAlign="center center" *ngIf="!item.unit || item.unit.unitType!='weight'">
                                                <div class="list-btn margin-l-xs" fxLayout="row" fxLayoutAlign="center center" *ngIf="item.Qty > 0" [ngClass]="{'icon-delete-circle-o':item.Qty == 1,'icon-minus-circle-o':item.Qty > 1}"
                                                    (click)="InventoryListMinusFromCart(item, $event)"></div>
                                                <div *ngIf="item.Qty > 0" fxLayout="row" fxLayoutAlign="center center" class="list-qty text-s margin-l-xs" (click)="openPanel(item,null,$event)">
                                                    {{item.Qty?item.Qty:0}}
                                                </div>
                                                <div class="i-add-circle list-btn add-btn margin-l-xs" fxLayout="row" fxLayoutAlign="center center" (click)="InventoryListAddToCart(item, $event)"></div>
                                            </div>
                                            <div fxLayout="row" fxLayoutAlign="center center" *ngIf="item.unit && item.unit.unitType=='weight'">
                                                <div *ngIf="item.Qty > 0" fxLayout="row" fxLayoutAlign="center center" class="weight-qty text-s margin-l-xs" (click)="openPanel(item,null,$event)">
                                                    {{item.Qty | number:'1.2-2'}}{{item.unit.name}}
                                                </div>
                                                <div class="ico-panel list-btn weight-btn margin-l-xs" fxLayout="row" fxLayoutAlign="center center" (click)="InventoryListAddToCart(item, $event)"></div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="invt-soldout" *ngIf="checkIsSoldOut(item.id)" (click)="false">
                                        <div fxLayout="row" fxLayoutAlign="center center" class="invt-soldout-tip">
                                            <span>售罄</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div fxFlex="70%" fxLayout="row" fxLayoutAlign="center center" *ngIf="!loadingInvt && (!inventoryList || inventoryList.length == 0)">
                            <div fxLayout="column" fxLayoutAlign="center center" fxFlex="70%">
                                <span>
                                    暂时没有商品
                                </span>
                                <span class="text-s v-gap color-lightgray">
                                    请打开店铺管理，依次点击设置-商品分类，按照店铺需要添加商品分类和商品
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div fxLayout="row" class="order-footer pct100 noshrink text-s" *ngIf="cartSvr.GetLastCartItem()">
                <div fxLayout="row" class="flex order-footer-invt">
                    <div class="margin-l-s">
                        <img class="order-footer-img" src="{{cartSvr.GetLastCartItem().inventory.pic ? cartSvr.GetLastCartItem().inventory.pic : './assets/images/invt-default-pic.png'}}">
                    </div>
                    <div fxLayout="column" class="margin-l-xs" (click)="ShowModifier(cartSvr.GetLastCartItem())">
                        <div class="footer-invtname text-ellipsis">{{cartSvr.GetLastCartItem().inventory.name}}</div>
                        <div>
                            <div>
                                <span class="color-primary">{{cartSvr.GetLastCartItem().price|number:'1.2-2'|currencySymbol}}</span>
                                <span>x</span>
                                <span>{{cartSvr.GetLastCartItem().qty}}</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div fxLayout="row" fxLayoutAlign="center center" class="order-footer-btn normal-btn" (click)="goToDoOrder(end)">
                    <span>去下单</span>
                </div>
                <div class="corner-mark color-accent bgcolor-white">{{cartSvr.CartList.length}}</div>
            </div>

            <div keyboard *ngIf="searchModel && showKeyboard" (setKeyText)="setKeyText($event)" (doEnter)="doEnter($event)" (backSpace)="backSpace($event)"
                (doReset)="doReset($event)" [(keyItem)]="key"></div>
        </div>
        <!-- 继续下单start -->
        <md-sidenav #end align="end" mode="over" class="order-list" fxFlex="100%" fxLayout="column">
            <div fxLayout="column" style="height: 100%;">
                <div class="app-header noshrink">
                    <span class="i-arrow-back margin-l header-icon" (click)="closeEnd(end)"></span>
                    <span fxFlex="100%" class="margin-l-xs">继续点单</span>
                    <span class="margin-r i-more-horiz" (click)="openWaitingPickUp()"></span>
                </div>
                <md-sidenav-container fxFlex="100%" fxLayout="column">
                    <md-sidenav #pickup align="end" mode="over" class="pick-up-side">
                        <div fxLayout="row" fxLayoutAlign="start center" class="pick-up-item margin-l-xs" (click)="waitingPickUp()">
                            <span class="ico-waitpickup color-lightgray"></span>
                            <div class="margin-l-xs side-text">等叫</div>
                        </div>
                    </md-sidenav>
                    <div class="v-scroll" fxFlex="100%" fxLayout="column">
                        <div *ngFor="let item of cartSvr.CartList" fxLayout="row" class="order-list-item margin-l-s noshrink">
                            <div fxLayout="column" fxFlex="100%" fxLayoutAlign="space-around start" class="order-list-info" (click)="CartViewShowModifier(item)">
                                <span class="text-left">{{item.inventoryName}}</span>
                                <div class="v-gap-s" *ngIf="item.modifiers && item.modifiers.items && item.modifiers.items.length">
                                    <div *ngFor="let mod of item.modifiers.items" fxLayout="row" fxLayoutWrap="wrap">
                                        <div *ngFor="let opt of mod.options" class="tag">
                                            <span>{{opt.name}}</span>
                                            <span class="noshrink" *ngIf="opt.price > 0">{{'(' + (opt.price|number:'1.2-2'|currencySymbol) + ')'}}</span>
                                        </div>
                                    </div>
                                </div>
                                <div *ngIf="item.extended && item.extended.description" class="tag">
                                    <span>{{item.extended.description}}</span>
                                </div>
                                <div class="text-left color-primary" fxLayout="row" fxLayoutAlign="start center">
                                    <span>{{(item.price?item.price:0)|currencySymbol}}</span>
                                    <span *ngIf="item.inventory&&item.inventory.unit">/</span>
                                    <span>{{item.inventory.unit ? item.inventory.unit.name : ""}}</span>
                                </div>
                            </div>
                            <div class="margin-t-xs noshrink" fxLayout="row" fxLayoutAlign="start center">
                                <div fxLayout="row" fxLayoutAlign="center center" class="noshrink" *ngIf="!item.inventory.unit || item.inventory.unit.unitType != 'weight'">
                                    <div class="ico-waitpickup text-m margin-r-xs color-lightgray" *ngIf="item.extended && item.extended.pickup && item.extended.pickup=='waiting'"></div>
                                    <button class="list-btn margin-r-xs" *ngIf="item.qty==1" fxLayout="row" fxLayoutAlign="center center" (click)="delFromCart($event, item, end)">
                                        <span class="icon-delete-circle-o"></span>
                                    </button>
                                    <button class="list-btn margin-r-xs" *ngIf="item.qty!=1" fxLayout="row" fxLayoutAlign="center center" (click)="minusFromCart($event, item)">
                                        <span class="icon-minus-circle-o"></span>
                                    </button>
                                    <div class="list-qty margin-r-xs text-s" fxLayout="row" fxLayoutAlign="center center" (click)="openPanel(item.inventory,item,$event)">
                                        <span>{{item.qty}}</span>
                                    </div>
                                    <button class="list-btn add-btn margin-r-xs" fxLayout="row" fxLayoutAlign="center center" (click)="plusFromCart($event, item)">
                                        <span class="i-add-circle"></span>
                                    </button>
                                </div>
                                <div fxLayout="row" fxLayoutAlign="center center" class="noshrink" *ngIf="item.inventory.unit && item.inventory.unit.unitType == 'weight'">
                                    <div class="ico-waitpickup text-m margin-r-xs color-lightgray" *ngIf="item.extended && item.extended.pickup && item.extended.pickup=='waiting'"></div>
                                    <button class="list-btn margin-r-xs" fxLayout="row" fxLayoutAlign="center center" (click)="delFromCart($event, item, end)">
                                        <span class="icon-delete-circle-o"></span>
                                    </button>
                                    <div fxLayout="row" fxLayoutAlign="center center" class="margin-r-xs list-qty-weight" (click)="openPanel(item.inventory,item,$event)">
                                        <span>{{item.qty | number:'1.2-2'}}</span>
                                    </div>
                                    <span class="text-xs margin-r-xs">{{item.inventory.unit.name}}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div fxLayout="column" class="noshrink">
                        <div fxLayout="row" fxLayoutAlign="start center" class="order-footer-statistics">
                            <span fxFlex="100%" class="text-left padding-l-s">合计 {{cartSvr.CartList.length}} 项</span>
                            <span class="color-primary noshrink padding-r-s">{{cartSvr.TotalAmount | number:'1.2-2' | currencySymbol}}</span>
                        </div>
                        <button md-button class="color-white bgcolor-accent normal-btn text-m" (click)="onConfirmOrder()">
                            <span class="">下单</span>
                        </button>
                    </div>
                </md-sidenav-container>
            </div>
        </md-sidenav>
        <!-- 继续下单end -->
    </md-sidenav-container>

    <!-- 单个订单查看start -->
    <!-- orderDetail.ts -->
    <!--<div order-detail (onCartViewPlus)="CartViewPlus($event)" (onCartViewMinus)="CartViewMinus($event)" (onCartViewDelete)="removeItemFromCart($event)"
        (onInventoryListAddToCart)="InventoryListAddToCart($event)"></div>-->
    <!-- 单个订单查看end -->

    <!-- 确认下单start -->
    <!--<order-confirm></order-confirm>-->
    <!-- 确认下单end -->
</div>